<template>
	<view class="content">
		<!-- 自定义导航栏 -->
		<uni-nav-bar class="nav-bar" title="缴 费" background-color="#090" color="#FFF" left-text="返回" left-icon="left"
			right-icon="list" @clickLeft="back" @clickRight="jump('/pages/feeRecord/feeRecord')">

		</uni-nav-bar>
		<!-- 累计费用统计 -->
		<view class="fee-accumulate">
			<text class="hint">当前待缴费用(元)</text>
			<text class="amount">￥{{amount}}</text>
		</view>
		<!-- 各项缴费列表 -->
		<uni-list>
			<uni-list-item title="水费" thumb="../../static/img/shui.png" thumbSize="lg"
				:rightText="fees.shui>0?`待缴${fees.shui}元`:''" link to="/pages/feePay/feePay?type=1"></uni-list-item>
			<uni-list-item title="电费" thumb="../../static/img/dian.png" thumbSize="lg"
				:rightText="fees.dian>0?`待缴${fees.dian}元`:''" link to="/pages/feePay/feePay?type=2"></uni-list-item>
			<uni-list-item title="煤汽费" thumb="../../static/img/ranqi.png" thumbSize="lg"
				:rightText="fees.ranqi>0?`待缴${fees.ranqi}元`:''" link to="/pages/feePay/feePay?type=3"></uni-list-item>
			<uni-list-item title="物业费" thumb="../../static/img/wuye.png" thumbSize="lg"
				:rightText="fees.wuye>0?`待缴${fees.tingche}元`:''" link to="/pages/feePay/feePay?type=4"></uni-list-item>
			<uni-list-item title="停车费" thumb="../../static/img/tingche.png" thumbSize="lg"
				:rightText="fees.tingche>0?`待缴${fees.tingche}元`:''" link
				to="/pages/feePay/feePay?type=5"></uni-list-item>
			<uni-list-item title="宽带费" thumb="../../static/img/kuandai.png" thumbSize="lg"
				:rightText="fees.kuandai>0?`待缴${fees.kuandai}元`:''" link
				to="/pages/feePay/feePay?type=6"></uni-list-item>
		</uni-list>
	</view>
</template>

<script>
	import {
		feeList
	} from '../../service'

	export default {
		data() {
			return {
				fees: {

				}
			}
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			jump(url) {
				uni.navigateTo({
					url
				})
			}
		},
		async onLoad() {
			const data = await feeList()
			this.fees = data;
		},
		//计算属性
		computed: {
			//计算出总的费用
			amount() {
				let sum = 0
				// 遍历对象fees
				for (let k in this.fees) {
					// 判断是否为正数
					if (this.fees[k] > 0) {
						sum += this.fees[k]
					}
				}
				return sum.toFixed(2)

			}
		}

	}
</script>

<style scoped lang="scss">
	.nav-bar {
		display: block;

		::v-deep .uni-navbar__content {
			display: block;
		}

	}

	.fee-accumulate {
		background-color: $zh-theme-color;
		color: $zh-theme-color-inverse;
		flex-direction: column;
		align-items: center;
		padding: $uni-spacing-col-lg*3 0;

		.hint {
			font-size: $uni-font-size-lg;
		}

		.amount {
			font-size: $uni-font-size-lg*2.5;
		}
	}
</style>